<!--首页-->
<template>
  <div class="home">
    <header-ad></header-ad>
    <nav-login></nav-login>
    <home-seach></home-seach>
    <!--搜索框-->
    <goods-nav :navindex="navindex"></goods-nav>
    <home-banner></home-banner>
    <home-notice></home-notice>
    <special-offer :data="product_recommend"></special-offer>
    <home-floor :floor="floor" :pic=" floor01 " :icon="icons[0]"></home-floor>
    <home-brand></home-brand>
    <home-floor :floor="floor1" :pic=" floor02 " :icon="icons[1]"></home-floor>
    <home-floor :floor="floor2" :pic=" floor03 " :icon="icons[2]"></home-floor>
    <!-- <home-floor :floor="floor3" :pic=" floor04 " :icon="icons[3]"></home-floor> -->
    <home-adimg :middleAdvertisement="middleAdvertisement"></home-adimg>
    <!-- <bottom-goods></bottom-goods> -->
    <bottom-nav></bottom-nav>
    <home-footer></home-footer>
    <!-- <RightNav class="RightNav" v-show="scrollTopShow"></RightNav> -->
    <el-button icon="el-icon-upload2" circle class="backTop" @click="backTop" v-show="backShow"></el-button>
  </div>
</template>
<script>
// 图片
import ADLeft from "../../assets/images/ADLeft01.png"
import goods from "../../assets/images/goods1.png"
import floor01 from "@/assets/homeFloor/floor01.jpg" // 楼层左侧图片
import floor02 from "@/assets/homeFloor/floor02.jpg" // 楼层左侧图片
import floor03 from "@/assets/homeFloor/floor03.jpg" // 楼层左侧图片
import floor04 from "@/assets/homeFloor/floor04.jpg" // 楼层左侧图片
// import axios from 'axios'
export default {
  name: "home",
  data() {
    return {
      icons: ['\ue615', '\ue60c', '\ue617', '\ue730'],
      backShow: false, // 返回顶部
      middleAdvertisement: '', // 中间广告
      // mySwitch :false,
      product_recommend: [], // 产品推荐
      shoppingNum: null, // 购物车
      floor01,
      floor02,
      floor03,
      floor04,
      navindex: 0,
      contact_info: {}, // 连续客服的内容存放处
      scrollTopShow: 0,
      floor: {},
      floor1: {},
      floor2: {},
      floor3: {}
    }
  },

  components: {
    homeBanner: () => import('./components/Banner'),
    homeNotice: () => import('./components/HomeNotice'),
    specialOffer: () => import('./components/SpecialOffer'),
    homeFloor: () => import('./components/Floor'),
    homeBrand: () => import('./components/Brand'),
    homeAdimg: () => import('./components/ADpic'),
    bottomGoods: () => import('./components/BottomGoods'),
    RightNav: () => import('./components/RightNav')
  },

  methods: {
    // 获取资讯中心的数据
    async getInformationCenterData() {
      const { data } = await this.$http('home/advisory_center/newscate')
      console.log('--------------------------------------------------')
      console.log(data)
      if (data.State.Code == 200) {
        this.$store.commit('getInformationCenterData', data.cate)
      }
    },
    scrollActive() {
      const scrollactivetop = document.documentElement.scrollTop // 滚轮到顶部距离
      const bodyHeight = document.body.clientHeight // 当前页面body的高度
      // console.log(bodyHeight)

      if (scrollactivetop > 1200) {
        // 兼容 页面高度过小而产生的 导航漂浮  bodyHeight > 1800
        this.backShow = true
      } else {
        this.backShow = false
      }
    },
    backTop() {
      document.documentElement.scrollTop = 0
    },
    // async 请求
    async getInfo() {
      let { data } = await this.$http({
        method: 'post',
        url: '/home/index/index',
        data: {}
      })
      console.log(data)
      if (data.State.Code == 200) {
        let DATA = data.data
        console.log(data)

        this.$store.commit("homeDisplay", DATA)
        // 产品推荐区域没有对接接口
        this.$store.commit("adPic", DATA.top_ad) // 顶部广告
        this.$store.commit("contact_info", DATA.contact_info) // 联系客服
        
        this.floor = this.intercept(DATA.floor[0]) // 楼层 1
        this.floor1 = this.intercept(DATA.floor[1]) // 楼层 2
        this.floor2 = this.intercept(DATA.floor[2]) // 楼层 3
        this.floor3 = this.intercept(DATA.floor[3]) // 楼层 4

        this.middleAdvertisement = DATA.intermediate_ad
        this.product_recommend = DATA.product_recommend
      }

    },

    // 数据处理 截取前9个
    intercept(obj) {
      obj.data = obj.data.slice(0, 9)
      return obj
    }

    // 下面是实验区域开始
    // async getInfotest() {
    //   return await this.$http({
    //     method: 'post',
    //     url: '/home/index/index',
    //     data: {}
    //   })
    // },
    // async getInformationCenterDatatest() {
    //   return await this.$http('home/advisory_center/newscate')
    // },
    // async getdata() {
    //   this.$http.all([this.getInfotest(), this.getInformationCenterDatatest()])
    //     .then(this.$http.spread((acct, perms) => {
    //       // 两个请求现在都执行完成
    //       console.log('----------------------------------------------------')
    //       console.log(acct, perms)
    //     }))
    // }
    // 实验区域结束
  },
  // 组件内路由导航守卫 beforeRouteEnter时候 不能使用this 应为此时实例还未创建  可用回调函数来创建代替this
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$store.commit('homeShow', false)
    })
  },
  beforeRouteLeave(to, from, next) {
    this.$store.commit('homeShow', true)
    next()
  },

  created() {
    this.getInformationCenterData()  // 获取资讯中心的数据
  },

  mounted() {
    this.getInfo()
    document.addEventListener("scroll", this.scrollActive)
    // this.getdata()  // 上面的实验区域的调用
  },

  deactivated() {
    document.removeEventListener("scroll", this.scrollActive)
  }

}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  position: relative;
  .RightNav {
    position: fixed;
    top: 70%;
    right: 0px;
    margin-top: -90px;
    font-size: 18px;
  }
  .backTop {
    position: fixed;
    right: 50px;
    bottom: 150px;
  }
}
</style>
